<style lang="less">
  @import '../styles/common.less';
  @import '../tables/components/table.less';
  @import './style/evaluate.less';
</style>
<!-- 通用评价 -->
<template>
  <div class="evaluate_list">
    <!--    <table class="evaluate-table" cellpadding="0" cellspacing="0">
          <tr>
            <td class="td-left">
              <div class="evaluate-action" @click="evaluateActionUpFun(thumb.is_thumb)">
                <Icon type="ios-thumbs-up" class="icon-color-green"
                      v-if="thumb.is_thumb.toString() == 'true' && thumb.is_thumb.toString() != ''"/>
                <Icon type="ios-thumbs-up-outline"
                      v-if="(thumb.is_thumb.toString() == 'false' || thumb.is_thumb.toString() == '')"/>
                <span v-text="thumb.up_number > 0 ? thumb.up_number : 0"></span>
              </div>
            </td>
            <td class="td-right">
              <div class="evaluate-action" @click="evaluateActionDownFun(thumb.is_thumb)">
                <Icon type="ios-thumbs-down" class="icon-color-red"
                      v-if="thumb.is_thumb.toString() == 'false' && thumb.is_thumb.toString() != ''"/>
                <Icon type="ios-thumbs-down-outline"
                      v-if="(thumb.is_thumb.toString() == 'true' || thumb.is_thumb.toString() == '')"/>
                <span v-text="thumb.down_number > 0 ? thumb.down_number : 0"></span>
              </div>
            </td>
          </tr>
        </table>-->
    <div class="botton-action">
      <div class="comments" @click="commentsFun()">
        <Icon type="ios-text-outline"/>
        <span v-if="show_comments_list != true">
              评论({{reply && reply.reply_number > 0 ? reply.reply_number : 0}})
            </span>
        <span v-if="show_comments_list == true">收起评论</span>
      </div>
      <div class="comments" @click="evaluateActionUpFun(thumb.is_thumb)">
        <Icon type="ios-thumbs-up" class="icon-color-green"
              v-if="thumb.is_thumb.toString() == 'true' && thumb.is_thumb.toString() != ''"/>
        <Icon type="ios-thumbs-up-outline"
              v-if="(thumb.is_thumb.toString() == 'false' || thumb.is_thumb.toString() == '')"/>
        <span>
          支持
          ({{thumb.up_number > 0 ? thumb.up_number : 0}})
        </span>
      </div>
      <div class="comments" @click="evaluateActionDownFun(thumb.is_thumb)">
        <Icon type="ios-thumbs-down" class="icon-color-red"
              v-if="thumb.is_thumb.toString() == 'false' && thumb.is_thumb.toString() != ''"/>
        <Icon type="ios-thumbs-down-outline"
              v-if="(thumb.is_thumb.toString() == 'true' || thumb.is_thumb.toString() == '')"/>
        <span>
          反对({{thumb.down_number > 0 ? thumb.down_number : 0}})
        </span>
      </div>
    </div>
    <div class="list-div" v-if="data.length > 0">
      <div class="up_rate_div">
        {{total}} 条评价(好评率：{{ thumb.up_rate > 0 ? thumb.up_rate : 0 }}%)
      </div>
      <div class="padding-0-10" v-for="el in data">
        <div class="user">
          <table class="table" cellpadding="0" cellspacing="0">
            <tr>
              <td class="td1">
                <img class="cursor" :src="el.user.avatar.thumb" alt="头像"
                     v-if="el.user && el.user.avatar && el.user.avatar.thumb"
                     @click="searchUserInfo(el.user.id)">
                <img class="cursor" src="/vendors/images/person.png" alt="头像"
                     v-if="!(el.user && el.user.avatar && el.user.avatar.thumb)"
                     @click="searchUserInfo(el.user.id)">
              </td>
              <td class="td3">
                <div class="name" v-text="el.user.name"></div>
              </td>
              <td>
                <div class="time" v-text="el.create_time"></div>
              </td>
            </tr>
          </table>
        </div>
        <div class="content">
          <span v-if="el.is_thumb == true" class="span-green">好评</span>
          <span v-if="el.is_thumb == false" class="span-red">差评</span>
          <span v-text="el.content" class="span"></span>
        </div>
      </div>
      <div class="page page-border" v-if="total > 0">
        <Page :total="total" :current="page" size="small" @on-change="changePage" show-elevator></Page>
      </div>
    </div>

    <!--人员详情-->
    <user-info
      :user_id="userInfo_id"
      @userInfoBackFun="userInfoBackFun"
    ></user-info>
  </div>
</template>

<script>
  import Cookies from 'js-cookie';
  import Util from '../../libs/util';
  import Utils from '../../libs/mod.utils';
  import String from '../../libs/mod.string';
  import Modal from '../../libs/mod.Modal';
  import userAvatar from '../components/user-avatar.vue';
  import userInfo from '../components/user-info.vue';
  export default {
    name: 'evaluateList',
    props: ['evaluate_type', 'evaluate_tid', 'evaluate_thumb', 'evaluate_reply', 'eval_commentsFun'],
    components: {
      userAvatar,
      userInfo
    },
    data () {
      return {
        type: '',
        tid: '',
        thumb: {},
        reply: null,
        uid: Util.toJson(localStorage.getItem('userInfo')).id,
        total: 0,
        page: 1,
        size: 5,
        id: '',
        data: {},
        show_comments_list: false,
        showCurrentTableData: false,
        userInfo_id: '',// 查看用户详情的用户id
      };
    },
    created: function () {
      var _this = this;
      _this.type = _this.evaluate_type;
      _this.tid = _this.evaluate_tid;
      _this.thumb = _this.evaluate_thumb;
      _this.reply = _this.evaluate_reply || null;
      console.log('thumb', _this.thumb);
      _this.get_list();
    },
    watch: {
      evaluate_tid: function () {
        var _this = this;
        _this.type = _this.evaluate_type;
        _this.tid = _this.evaluate_tid;
        _this.thumb = _this.evaluate_thumb;
        _this.reply = _this.evaluate_reply || null;
        _this.get_list();
      }
    },
    mounted () {
      var _this = this;
    },
    methods: {
      // 查看用户详情
      searchUserInfo: function (id) {
        var _this = this;
        _this.userInfo_id = id;
      },
      userInfoBackFun: function (id) {
        var _this = this;
        _this.userInfo_id = id;
      },
      commentsFun: function () {
        var _this = this;
        if (_this.show_comments_list) {
          _this.show_comments_list = false;
        } else {
          _this.show_comments_list = true;
        }
        if (_this.reply) {
          _this.$emit('eval_commentsFun', _this.show_comments_list);
        }
      },
      get_list: function () {
        var _this = this;
        if (!_this.tid > 0) {
          return false;
        }
        var data = {
          uid: Util.toJson(localStorage.getItem('userInfo')).id,
          page: _this.page,
          size: _this.size,
          type: _this.type,
          tid: _this.tid,
        };
        var params = {
          url: '/thumb/list',
          type: Util.method.post,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var _data = res.data || [];
            _this.total = res.rows;
            _this.data = _data;
          } else {
            _this.$Message.destroy();
            _this.$Message.error('查询评价信息失败!');
          }
        }
      },
      // 支持
      evaluateActionUpFun: function (is_thumb) {
        var _this = this;
        if (is_thumb.toString() == 'true') {// 取消支持
          _this.evaluateSave(_this.tid, _this.type, 'up', true, '', function (_data) {
            if (_data.result == 0) {
              var data = _data.data;
              var thumb = {
                up_number: data.up_number || 0,
                down_number: data.down_number || 0,
                up_rate: data.up_rate || 0,
                is_thumb: '',
              };
              _this.thumb = thumb;
              _this.page = 1;
              _this.get_list();
            } else {
              _this.$Message.destroy();
              _this.$Message.error('评价失败!' + data.result);
            }
          });
        } else {// 支持
          _this.evaluateSave(_this.tid, _this.type, 'up', false, '', function (_data) {
            if (_data.result == 0) {
              var data = _data.data;
              var thumb = {
                up_number: data.up_number || 0,
                down_number: data.down_number || 0,
                up_rate: data.up_rate || 0,
                is_thumb: true,
              };
              _this.thumb = thumb;
              _this.page = 1;
              _this.get_list();
            } else {
              _this.$Message.destroy();
              _this.$Message.error('评价失败!' + data.result);
            }
          });
        }
      },
      // 反对
      evaluateActionDownFun: function (is_thumb) {
        var _this = this;
        if (is_thumb.toString() == 'false') {// 取消反对
          _this.evaluateSave(_this.tid, _this.type, 'down', true, '', function (_data) {
            if (_data.result == 0) {
              var data = _data.data;
              var thumb = {
                up_number: data.up_number || 0,
                down_number: data.down_number || 0,
                up_rate: data.up_rate || 0,
                is_thumb: '',
              };
              _this.thumb = thumb;
              _this.page = 1;
              _this.get_list();
            } else {
              _this.$Message.destroy();
              _this.$Message.error('评价失败!' + data.result);
            }
          });
        } else {// 反对
          Modal.confirmInput(_this, {content: '请输入差评理由'}, function (val) {
            if (val.trim() == '') {
              _this.$Message.destroy();
              _this.$Message.error('请输入差评理由!');
              return false;
            } else {
              _this.evaluateSave(_this.tid, _this.type, 'down', false, val, function (_data) {
                if (_data.result == 0) {
                  var data = _data.data;
                  var thumb = {
                    up_number: data.up_number || 0,
                    down_number: data.down_number || 0,
                    up_rate: data.up_rate || 0,
                    is_thumb: false,
                  };
                  _this.thumb = thumb;
                  _this.page = 1;
                  _this.get_list();
                } else {
                  _this.$Message.destroy();
                  _this.$Message.error('评价失败!' + data.result);
                }
              });
            }
          }, function () {
          });
        }
      },
      // 支持反对保存
      evaluateSave: function (tid, type, thumb_type, is_cancel, content, _successFun) {
        var _this = this;
        var data = {
          uid: Util.toJson(localStorage.getItem('userInfo')).id,
          tid: tid,
          type: type,
          thumb_type: thumb_type,//"up": "好评","down": "差评"
          is_cancel: is_cancel,//"true为取消好评或取消差评",
          content: content,//备注
        };
        var params = {
          url: '/thumb/update',
          type: Util.method.post,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
      },
      // 翻页
      changePage: function (page) {
        var _this = this;
        _this.page = page;
        _this.get_list();
      },
    },
  };
</script>
